<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '取消原因',
  },
}
</route>

<template>
  <view class="cancel-page">
    <!-- 大标题 -->
    <view class="title">选择取消原因</view>

    <!-- 原因选择 -->
    <wd-radio-group v-model="cancelReason" checked-color="#fa4350" class="radio-group">
      <wd-radio value="暂时不需要了">暂时不需要了</wd-radio>
      <wd-radio value="信息填写错误">信息填写错误</wd-radio>
      <wd-radio value="价格波动较大">价格波动较大</wd-radio>
      <wd-radio value="其他原因">其他原因</wd-radio>
    </wd-radio-group>

    <!-- 其他原因输入 -->
    <view v-if="cancelReason === '4'" class="textarea-wrapper">
      <wd-textarea
        v-model="otherReason"
        placeholder="请填写具体原因（10-200字）"
        :max-length="200"
        show-word-limit
        clearable
      />
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="handleSubmit">提交</view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { OrderApi } from '@/service/order/order'
import { OrderStatusDto } from '@/service/order/order.d'
import { OrderStatusEnum } from '@/service/order/orderEnum.d'

// 响应式数据
const cancelReason = ref('')
const otherReason = ref('')
const toast = useToast()
const orderId = ref(null)
onLoad((options) => {
  console.log(options)
  if (options.oderId !== null) {
    orderId.value = options.orderId
  } else {
    toast.show('非法访问')
    uni.navigateBack()
  }
})

// 提交处理
const handleSubmit = async () => {
  if (!cancelReason.value) {
    return toast.show('请选择取消原因')
  }

  if (cancelReason.value === '4' && !otherReason.value.trim()) {
    return toast.show('请填写具体原因')
  }

  try {
    // 此处调用取消订单API
    const obj: OrderStatusDto = {
      cancelReason: cancelReason.value,
      orderId: orderId.value,
      status: OrderStatusEnum.CANCEL,
    }
    const { code, data } = await OrderApi.updateOrderStatus(obj)
    if (code === 200 && data) {
      toast.show('取消成功')
      setTimeout(() => uni.navigateBack(), 1000)
    } else {
      toast.show('取消失败')
    }
  } catch (error) {
    console.error('取消失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.cancel-page {
  min-height: 100vh;
  padding: 16rpx;
  background: #f8f8f8;

  .title {
    margin: 48rpx 0;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
  }

  .radio-group {
    padding: 0 32rpx;
    background: #fff;
    border-radius: 16rpx;

    :deep(.wd-radio) {
      padding: 32rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border: none;
      }
    }
  }

  .textarea-wrapper {
    padding: 20rpx;
    margin-top: 22rpx;
    background: #fff;
    border-radius: 16rpx;

    :deep(.wd-textarea__textarea) {
      min-height: 200rpx !important;
      font-size: 28rpx;
    }

    :deep(.wd-textarea__placeholder) {
      color: #999;
    }
  }

  .submit-btn {
    position: fixed;
    right: 32rpx;
    bottom: 64rpx;
    left: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    background: #fa4350;
    border-radius: 44rpx;
    box-shadow: 0 4rpx 16rpx rgba(250, 67, 80, 0.2);

    &:active {
      opacity: 0.9;
    }
  }
}
</style>
